<template>
  <div class="book-card" @click="goBookDetail">
     <image class="book-thumb" mode="aspectFit" :src="book.image" :lazy-load="true" />
     <div class="detail">
       <div class="left">
         <div class="primary-color">{{ book.title }}</div>
         <div>{{ authors }}</div>
         <div>{{ book.publisher }}</div>
       </div>
       <div class="right">
          <div class="rate-show">
            <div class="rate-val primary-color">{{ book.avrgRating }}</div>
            <Rate :value="book.avrgRating" />
          </div>
         <div>由{{ book.userId.nickName }}加入</div>
         <div class="access-count">已被浏览{{ book.accessCount }}次</div>
       </div>
     </div>
  </div>
</template>

<script>
  import Rate from '@/components/Rate';
  export default {
    props: {
      book: {
        type: Object,
        default: {}
      },
    },
    components: {
      Rate,
    },
    methods: {
      goBookDetail () {
        wx.navigateTo({
          url: `/pages/bookDetail/main?isbnCode=${this.book.isbnCode}`
        });
      }
    },
    computed: {
      authors () {
        const { author = [] } = this.book;
        return author.join();
      }
    },
  }
</script>

<style lang="less" scoped>
.book-card {
  margin: 20rpx 0;
  display: flex;
  &:active {
    // :active,点击时的效果
    background-color: #f7f5f5;
  }
  .book-thumb {
    width: 180rpx;
    height: 180rpx;
  }
  .detail {
    font-size: 12px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      & > div {
        line-height: 1.7;
      }
    }
    .right {
      margin-left: 20rpx;
      text-align: right;
      .rate-show {
        display: inline-flex;
        .rate-val {
          margin-right: 6rpx;
        }
      }
      .access-count {
        color: #bbb;
      }
    }
  }
}
</style>